<script setup>
import {onLoad} from '@dcloudio/uni-app';
import {inject, ref} from 'vue';

const isMiniProgram = inject('isMiniProgram');

const videoContext = uni.createVideoContext('myVideo');
const title = ref('');
const id = ref('');
const text = ref('欧式豪华别墅内展示奔驰C级，纯白色 ，后视角，高清 ，超真实 ')

onLoad((option) => {
  title.value = option.title
  id.value = option.id
});
const leftClick = () => {
  uni.navigateBack()
}
const copyClick = () => {
  uni.setClipboardData({
    data: text.value,
    success: () => {
      uni.showToast({
        title: '内容已复制！',
        icon: 'success',
        duration: 2000
      });
    },
    fail: () => {
      uni.showToast({
        title: '复制失败！',
        icon: 'none',
        duration: 2000
      });
    }
  })
}
</script>
<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top-box">
      <fui-icon :size="48" name="arrowleft" @click="leftClick"></fui-icon>
      <view style="width: 160rpx;">{{ title }}</view>
      <view :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" class="lable-box">
        <div class="top-img">
          <image class="image-top" src="/static/index/top-lable.svg"/>
        </div>
        <text>我的作品</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="AI-video-content">
    <view class="video_box">
      <video id="myVideo" :loop="true" :playsinline="true" :requestFullScreen="requestFullScreen"
             src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
    </view>
    <view class="user_content">
      <view class="user_box">
        <image class="user_avatar" src="https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg"/>
        <view class="user">
          <view class="name">用户名称</view>
          <view class="time">2024-02-28 17：23</view>
        </view>
      </view>
      <view class="content_box">
        <view class="top">
          <text>提示词</text>
          <image src="/static/AI/copy.svg" @click="copyClick"/>
        </view>
        <view class="text">{{ text }}</view>
      </view>
    </view>
    <view class="btn_box">
      <button class="copy_btn">生成同款</button>
      <button class="index_btn">引用此图</button>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.nav-top-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lable-box {
    width: 212rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;

    .top-img {
      margin: 0 10rpx 0 35rpx;

      .image-top {
        width: 36rpx;
        height: 36rpx;
      }
    }

    text {
      font-size: 25rpx;
      color: #666666;
    }
  }
}

.AI-video-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;

  .video_box {
    width: 100%;
    height: 724rpx;

    #myVideo {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }

  .user_content {
    margin: 20rpx;
    width: 100%;
    height: 442rpx;

    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    .user_box {
      width: 670rpx;
      height: 74rpx;
      display: flex;
      align-items: center;

      .user_avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 9999rpx;
      }

      .user {
        margin: 20rpx;
        height: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .name {
          font-size: 28rpx;
          color: #999999;
        }

        .time {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }

    .content_box {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      padding: 20rpx;
      width: 670rpx;
      height: 196rpx;
      background: #f4f4f4;
      border-radius: 28rpx;

      .top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          margin: 10rpx;
          width: 24rpx;
          height: 30rpx;
        }
      }

      .text {
        font-size: 28rpx;
        font-weight: 500;
      }
    }
  }

  .btn_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .copy_btn {
      height: 90rpx;
      width: 300rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 99999rpx;
      background: linear-gradient(302.79deg, #12868C 7.39%, #5DDAE0 71.89%, #A2FAFF 98.88%);
    }

    .index_btn {
      position: relative;
      height: 90rpx;
      width: 300rpx;
      background: linear-gradient(white, white) padding-box,
      linear-gradient(302.79deg, #12868C 7.39%, #5DDAE0 71.89%, #A2FAFF 98.88%) border-box;
      border-radius: 999rpx;
      border: 4rpx solid transparent;
      color: #7E7D7D;
      font-size: 28rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
